<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles/back.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="styles/photo3d.css" media="screen" type="text/css" />
</head>

<body>
    <canvas id="space"></canvas>
    <div id="contentContainer" class="trans3d">
        <section id="carouselContainer" class="trans3d">
        </section>
    </div>
    <div id="imgshow" style="position:absolute;">
        
    </div>

<script src="scripts/libs.min.js"></script>
<script src="scripts/photo3d.js"></script>
<script>

    window.requestAnimFrame = (function(){   return  window.requestAnimationFrame})();
    var canvas = document.getElementById("space");
    var c = canvas.getContext("2d");

    var numStars = 1900;
    var radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
    var focalLength = canvas.width *2;
    var warp = 0;
    var centerX, centerY;

    var stars = [], star;
    var i;

    var animate = true;

    initializeStars();

    function executeFrame(){

        if(animate)
            requestAnimFrame(executeFrame);
        moveStars();
        drawStars();
    }

    function initializeStars(){
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;

        stars = [];
        for(i = 0; i < numStars; i++){
            star = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                z: Math.random() * canvas.width,
                o: '0.'+Math.floor(Math.random() * 99) + 1
            };
            stars.push(star);
        }
    }

    function moveStars(){
        for(i = 0; i < numStars; i++){
            star = stars[i];
            star.z--;

            if(star.z <= 0){
                star.z = canvas.width;
            }
        }
    }

    function drawStars(){
        var pixelX, pixelY, pixelRadius;

        // Resize to the screen
        if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initializeStars();
        }
        if(warp==0)
        {c.fillStyle = "rgba(0,10,20,1)";
            c.fillRect(0,0, canvas.width, canvas.height);}
        c.fillStyle = "rgba(209, 255, 255, "+radius+")";
        for(i = 0; i < numStars; i++){
            star = stars[i];

            pixelX = (star.x - centerX) * (focalLength / star.z);
            pixelX += centerX;
            pixelY = (star.y - centerY) * (focalLength / star.z);
            pixelY += centerY;
            pixelRadius = 1 * (focalLength / star.z);

            c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
            c.fillStyle = "rgba(209, 255, 255, "+star.o+")";
            //c.fill();
        }
    }

    // document.getElementById('warp').addEventListener("click",function(e){
    //     window.c.beginPath();
    //     window.c.clearRect(0, 0, window.canvas.width, window.canvas.height);
    //     window.warp = warp ? 0 : 1;
    //     executeFrame();
    // });

    executeFrame();
</script>
</body>

</html>
